import { Component } from 'react';
import { Card, Row, Col } from 'antd';

class Authentication extends Component {

  render() {

    const {
      headStyle,
      companyChangeLog,
      userInformation,
      changedImg,
      formatDate,
    } = this.props;


    // 被改变过的信息Json对象化
    let changedInformation = companyChangeLog.json;

    function renderField(fieldName, render) {
      if (fieldName in changedInformation) {
        return render ? (
          render(changedInformation[fieldName])
        ) : (
          <span>
            <label style={{ color: 'red', marginRight:10 }}><del>{userInformation[fieldName]}</del></label>
            <label style={{ color: '#000' }}>{changedInformation[fieldName]}</label>
          </span>
        );
      }
      return userInformation[fieldName];
    }

    return (
      <Card
      title={ '实名认证信息' }
      headStyle={headStyle}
      style={{ marginBottom: '20px' }}
    >
      <Row>
        <Col span={10}>
          <div style={{ marginBottom: '10px' }}>姓名：{renderField('name')}</div>
          <div style={{ marginBottom: '10px' }}>身份证号：{renderField('identityNumber')}</div>
          <div style={{ marginBottom: '10px' }}>
            证件有效期：{renderField('validStartTime', val => formatDate(val,'YYYY-MM-DD'))} ~{' '}
            {renderField('validEndTime', val => formatDate(val,'YYYY-MM-DD'))}
          </div>
        </Col>
        <Col span={12}>
          <div style={{ marginBottom: '10px' }}>证件：</div>
          {renderField('picFrontIdInfo', val => val) && (
            <img
              style={{
                ...{ maxWidth: '50%' },
                ...(userInformation.picFrontIdInfo ? changedImg : null),
              }}
              src={renderField('picFrontIdInfo', val => val).url}
              alt="身份证正面"
            />
          )}
          {renderField('picBackIdInfo', val => val) && (
            <img
              style={{
                ...{ maxWidth: '50%' },
                ...(changedInformation.picBackIdInfo ? changedImg : null),
              }}
              src={renderField('picBackIdInfo', val => val).url}
              alt="身份证反面"
            />
          )}
        </Col>
      </Row>
    </Card>
    );
  }
}

export default Authentication;
